<template>
	<div class="main-container">
		<!-- 标题 -->
		<van-nav-bar v-bind:title="selectName[selectIndex]" />
		<!-- 中间布局 -->
		<router-view class="main-content" />
		<!-- 底部 Tab -->
		<van-tabbar v-model="selectIndex">
			<van-tabbar-item v-for="(tab, i) in tabList" :key="i" v-bind:badge="tab.badge"
				v-bind:icon="isSelected(i) ? tab.iconSelected : tab.iconNormal" @click="chooseTab(tab)">
				{{tab.name}}
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				selectIndex: 0,
				selectName: ["消息", "好友", "我的"],
				tabList: [{
						"iconSelected": "chat",
						"iconNormal": "chat-o",
						"name": "消息",
						"route": "/home",
						"badge": "",
						"dot": "dot"
					},
					{
						"iconSelected": "friends",
						"iconNormal": "friends-o",
						"name": "好友",
						"route": "/firends",
						"badge": "20",
						"dot": "dot"
					},
					{
						"iconSelected": "manager",
						"iconNormal": "manager-o",
						"name": "我的",
						"route": "/mine",
						"badge": "",
						"dot": "dot"
					}
				]
			}
		},
		mounted() {
			// 同步 路由和 tab 选择
			// 其他页面返回 只会调用 mounted
			for (var i = 0; i < this.tabList.length; i++) { 
			    if(this.tabList[i].route === this.$route.path){
					this.selectIndex = i
				}
			 }
		},
		updated() {
			// 页面更新, 页面内路由
			
		},
		methods: {
			chooseTab(item) {
				// 修改选中 tab
				this.selectIndex = this.tabList.indexOf(item)
				// 路由跳转
				this.$router.push(item.route)
			},
			isSelected(i) {
				// 获取 tab 是否选中
				return i == this.selectIndex
			}
		}
	}
</script>

<style lang="scss">
	.main-container {
		height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;

		.main-content {
			background-color: #f6f6f6;
			flex: 1;
		}
	}
</style>